<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <link rel="stylesheet" href="css/reset.css">
  <link rel="stylesheet" href="css/index.css">
  <script src="js/index.js"></script>
</head>
<body>
  <div id="main">
    <div id="loading">
      <div></div>
      <div></div>
      <span></span>
    </div>
    <div id="header">
      <div id="headerMain">
        <a href="#" class="logo"></a>
        <div id="music">
          <audio src="img/audio.mp3" id="Myaudio" preload="auto" loop="loop"></audio>
        </div>
        <ul id="nav">
          <li>
            <div class="up">
              <img src="img/home_gruen.png" alt="">
            </div>
            <div>
              <img src="img/home.png" alt="">
            </div>
          </li>
          <li>
            <div class="up">技能</div>
            <div>技能<div>
          </li>
          <li>
            <div class="up">项目</div>
            <div>项目</div>
          </li>
          <li>
            <div class="up">兴趣</div>
            <div>兴趣</div>
          </li>
          <li>
            <div class="up">关于</div>
            <div>关于</div>
          </li>
        </ul>
        <div class="arrow"></div>
      </div>

    </div>
    <div id="content">
      <div class="side_Nav">
        <a href="javascript:;" class="active"></a>
        <a href="javascript:;"></a>
        <a href="javascript:;"></a>
        <a href="javascript:;"></a>
        <a href="javascript:;"></a>
      </div>
      <ul id="list">
        <li class="liList">
          <div id="page1" class="page">
            <div class="homeContend">
              <div class="homeBtn">
                <span class="homeBtnActive">
                </span>
                <span></span>
                <span></span>
                <span></span>
              </div>
            </div>
          </div>
        </li>
        <li class="liList">
          <div id="page2" class="page clear">
            <div class="txtBox fl">
              <h1 class="txtH1">
                掌握的<br />
                技能
              </h1>
              <!-- <p class="txtContent"></p> -->
            </div>
            <div id="fanpai" class="fr">
              <div class="courseLine"></div>
              <div class="courseLine"></div>
              <div class="courseLine"></div>
              <div class="courseLine"></div>
              <div class="courseLine"></div>
            </div>
            <div class="plane1"></div>
            <div class="plane2"></div>
            <div class="plane3"></div>
          </div>
        </li>
        <li class="liList">
          <div id="page3" class="page clear">
            <div class="txtBox fl">
              <h1 class="txtH1">
                个人平时开发<br />
                小项目
              </h1>
              <p class="txtContent">
                因为有着对前端的强烈的兴趣，利用平时下班或者休闲之余，编写一些前端的小demo或者是小项目。
              </p>
            </div>
            <div class="roboBox fr">
              <img class="robo" src="img/robot.png" />
            </div>
            <div class="clear"></div>
            <div class=" page3Content clear">
              <div class="rowImg">
                <a href="#">
                  <img class="page3img" src="img/worksimg1.jpg" />
                  <div class="marker">
                    <span>运用Canvas+CSS3模拟微信朋友圈图片红包的demo</span>
                    <div class="bigIcon"></div>
                  </div>
                </a>
              </div>
              <div class="rowImg">
                <a href="#">
                  <img class="page3img" src="img/worksimg2.jpg" />
                  <div class="marker">
                    <span>运用jq+CSS3+html5编写兼容pc和移动端的网页音乐播放器</span>
                    <div class="bigIcon"></div>
                  </div>
                </a>
              </div>
              <div class="rowImg">
                <a href="#">
                  <img class="page3img" src="img/worksimg3.jpg" />
                  <div class="marker">
                    <span>LESS+Angular编写移动端的单页面webapp</span>
                    <div class="bigIcon"></div>
                  </div>
                </a>
              </div>
              <div class="rowImg">
                <a href="#">
                  <img class="page3img" src="img/worksimg4.jpg" />
                  <div class="marker">
                    <span>运用原生HDcms+js+html+css编写的精品课程教学网站</span><br />
                    <div class="bigIcon"></div>
                  </div>
                </a>
              </div>
            </div>
            <div class="pancel1"></div>
            <div class="pancel2"></div>
            <div class="pancel3"></div>
          </div>
        </li>
        <li class="liList">
          <div id="page4" class="page">
            <div class="txtBox fl">
              <h1 class="txtH1">
                兴趣：<br />
                前端开发<br />
                运动
              </h1>
              <p class="txtContent">
                确切的说，我的兴趣是很单一的没那么广泛，但对前端开发以及运动（篮球之类等等）是尤其发浓厚的，平时没事敲敲代码，看看电影之类的。
              </p>
            </div>
            <div id="wanhua" class="fr">
              <div class="imgBox">
                <div class="wanhua_down"><img src="img/about1.jpg"/></div>
                <div class="wanhua_up">
                  <!--<div></div>
                  <div></div>
                  <div></div>
                  <div></div>-->
                </div>
              </div>
              <div class="imgBox">
                <div class="wanhua_down"><img src="img/about2.jpg"/></div>
                <div class="wanhua_up">
                  <!--<div><img src="img/about3.jpg"/></div>
                  <div><img src="img/about3.jpg"/></div>
                  <div><img src="img/about3.jpg"/></div>
                  <div><img src="img/about3.jpg"/></div>-->
                </div>
              </div>
            </div>
            
          </div>
        </li>
        <li class="liList">
          <div id="page5" class="page clear">
            <div class=" change txtBox fl">
              <h1 class="txtH1">
                关于<br />
                我的<br />
              </h1>
            </div>
            <div class="p5_text fr">
              <p>微信：跑贼神</p>
              <p>邮箱：zzx901225@163.com</p>
              <p>签名：前端，用了一个叫Vue的框架</p>
            </div>
            <div class="p5_list">
              
            </div>
          </div>
        </li>
      </ul>
    </div>
  </div>
</body>
</html>